<template>
  <p>eat: {{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = '🍜'">update eat</button>
</template>

<script>
import { watch, ref, reactive, isReactive } from 'vue'
export default {
  setup() {
    const obj = ref({
      hobby: {
        eat: '西瓜',
      },
    })
    // 和上面类似
    /* reactive({
      value: {
        hobby: {
          eat: '西瓜',
        },
      },
    }) */
    // watch 监听 ref 类型的数据，默认是浅监听（只监听最外面一层）
    // 铺垫：ref 如果包裹的是一个对象的话，其实内部也是借助 reactive 实现的
    console.log(isReactive(obj.value)) // true
    console.log(isReactive(obj.value.hobby)) // true

    // 下面写法其实监听的是一个 reactive 类型的数据（那就符合监听 reactive 数据的特点，就是开启深度监听）
    watch(obj.value, (newValue) => {
      console.log(newValue)
    })
    return { obj }
  },
}
</script>
